import {report,chooseList,chooseDay,bookDay} from './request.js'
// 最基本的实现思路
// 1.先请求下拉框的日期
// 2.根据日期请求对应场次
(async function(){
    const {tbody, confirm, customslec, customopt, custom_filter}={
        tbody: document.getElementById('tbody'), 
        confirm: document.getElementById('confirm'), 
        customslec: document.getElementById('customslec'), 
        customopt: document.getElementById('customopt'), 
        custom_filter: document.getElementById('custom_filter')
    }
  
        try{
            let alreadyBookArray = [];
            let dataReport = {
                phone : sessionStorage.getItem('uphone'),
                name : sessionStorage.getItem('uname')
            }
            const resReport = await report(dataReport)
            // resReport存放已经预约过的时间
            resReport.result.forEach(ele=>{
                    alreadyBookArray.push(ele.day_time)
                })
            console.log(alreadyBookArray)
            // 已经预约过时间的数组,后面会用到
            sessionStorage.setItem('alreadyBookArray',JSON.stringify(alreadyBookArray))
    
            let dataChooseList = {
                token : sessionStorage.getItem('token')
            }
            const resChooseList = await chooseList(dataChooseList)
            // resChooseList存放未来7天时间列表
            console.log(resChooseList)
            resChooseList.result.list.forEach((ele,index) => {
                // 当出现非此即彼的情况下,可以采用标志的想法,声明一个变量:let flag = true
                let flag = true;//flag 作用:就是用来标志当前ele是否已经预约过,为true 没有预约过
                // list [1.2.3.4.5.6.7]
                // alreadyBookArray[2.5]
                // ele指的是未来7天的每一天
                // ele2 是已经预约过的每一天
                if(alreadyBookArray.some(ele2=>{return ele.day_time == ele2})){
                    flag = false;//flag为false 当天有预约
                }
                // 做了两件事件
                // 1.给每个日期添加了data-booked 自定义属性 用作区分是否预约过了
                // 2.通过判断区分显示有没有checked 第一个元素默认checked 第二个到最后都没有checked
                // 渲染下拉框时间
                if(index==0){
                    console.log(ele,'haha')
                    customslec.innerHTML = `${ele.day_time}` ;
                    customslec.setAttribute('data-booked',flag);
                    customopt.innerHTML += `
                        <label for="opt${index+1}" class="label">
                            <div>
                                <div>${ele.day_time}</div>
                                <input class="selfradio" id="opt${index+1}" name="selfselc" type="radio" data-booked="${flag}" checked>
                            </div>
                        </label>
                `
                }
                else{
                    customopt.innerHTML += `
                        <label for="opt${index+1}" class="label">
                            <div>
                                <div>${ele.day_time}</div>
                                <input class="selfradio" id="opt${index+1}" name="selfselc" type="radio" data-booked="${flag}">
                            </div>
                        </label>
                    `
                }
            });
            console.log(customslec.dataset.booked)
            custom_filter.addEventListener('click',function(){
                custom_filter.classList.add('scale0')
            })
            
            customslec.addEventListener('click',function(){
                custom_filter.classList.remove('scale0')
            })

            let dataChooseDay = {
                token : sessionStorage.getItem('token'),
                day_time : customslec.innerHTML
            }
            const resChooseDay = await chooseDay(dataChooseDay)
            // 保存第一天的场次信息
            console.log(resChooseDay)
            
            tbody.innerHTML = `
                <tr>
                    <th>场 次</th>
                    <th>状 态</th>
                </tr>
            ` 
            resChooseDay.result.list.forEach(ele=>{
                // 渲染页面的函数
                // 参数一:是否预约过的booked值
                // 参数二:每一天
                renderDom(customslec.dataset.booked,ele)
            })
            function renderDom(domflag,this_ele){
                // 有没有预约过的代码
                if(domflag=="true"){
                    // 没有预约过的
                    let this_time = new Date();
                    let this_show_time
                    switch(this_ele.show_id){
                        case 1 :
                            this_show_time = new Date(`${this_ele.day_time}T12:00:00`)
                            break;
                        case 2 :
                            this_show_time = new Date(`${this_ele.day_time}T14:30:00`)
                            break; 
                        case 3 :
                            this_show_time = new Date(`${this_ele.day_time}T17:00:00`)
                            break;
                    }
                    if(this_time - this_show_time <= 0){
                        // 没超过+没约过
                        tbody.innerHTML += `
                        <tr>
                            <td>${this_ele.show_name}</td>
                            <td><button data-show_name=${this_ele.show_name} data-day_time=${this_ele.day_time} data-show_id =${this_ele.show_id} class="book_Run booktrue">可预约</button></td>
                        </tr>
                    `
                    }
                    else{
                        // 没预过 但是时间超过
                        tbody.innerHTML += `
                        <tr>
                            <td>${this_ele.show_name}</td>
                            <td><span data-show_name=${this_ele.show_name} data-day_time=${this_ele.day_time} data-show_id =${this_ele.show_id} ><span class="bookfalse">已结束</span></span></td>
                        </tr>
                    `
                    }
                }
                // 有预约过的
                else{
                    tbody.innerHTML += `
                        <tr>
                            <td>${this_ele.show_name}</td>
                            <td><span data-show_name=${this_ele.show_name} data-day_time=${this_ele.day_time} data-show_id =${this_ele.show_id} ><span class="bookfalse">本日已预约</span></span></td>
                        </tr>
                    `
                }
            }
    
            // //日期改变重新请求 // customslec 用户选择日期的事件处理函数
            customopt.addEventListener('click', async function(e){
                if(e.target.checked == true){
                    // 获取日期
                    customslec.innerHTML = e.target.previousElementSibling.innerHTML
                    customslec.setAttribute('data-booked',e.target.dataset.booked)
    
                    //过渡动画
                    tbody.innerHTML = `
                        <div class="spinner" id="spinner">
                            <div class="rect1"></div>
                            <div class="rect2"></div>
                            <div class="rect3"></div>
                            <div class="rect4"></div>
                            <div class="rect5"></div>
                        </div>
                    `
                    dataChooseDay = {
                        token : sessionStorage.getItem('token'),
                        day_time : e.target.previousElementSibling.innerHTML
                    }
                    // 根据用户选择的日期发送请求
                    const resChooseDay = await chooseDay(dataChooseDay)
                    // resChooseDay 用户新请求的数据
                    console.log(resChooseDay)
                    setTimeout(function(){
                        // 清楚上一次渲染数据
                                tbody.innerHTML = `
                                    <tr>
                                        <th>场 次</th>
                                        <th>状 态</th>
                                    </tr>
                                ` 
                                // 将数据丢给渲染函数做数据的渲染
                                resChooseDay.result.list.forEach(ele=>{
                                    renderDom(e.target.dataset.booked,ele)
                                })
                            },500)
                }
            })
            
            // //跳转预约
            let confirm_yes = document.getElementById('confirm_yes')
            let confirm_no = document.getElementById('confirm_no')
            tbody.addEventListener('click',function(e){
                let choosDate = document.getElementById('choosDate')
                let choosTime = document.getElementById('choosTime')
               
                if(e.target.classList[0] == "book_Run"){
                    console.log(e.target.dataset)
                    // e.target.href = "./book2.html"
                    // 本来是有index_under 类名 mask不会显示
                    confirm_filter.classList.remove('index_under')
                    // 本来是有scale0 类名 预约弹窗不会显示
                    confirm.classList.remove('scale0')
                    let this_day_time = e.target.dataset.day_time
                    let this_show_name = e.target.dataset.show_name
                    // let this_show_id = e.target.dataset.show_id
                    choosDate.innerHTML = `日期: ${this_day_time}`
                    choosTime.innerHTML = `时间: ${this_show_name}`
                    sessionStorage.setItem('choosDate',this_day_time)
                    sessionStorage.setItem('choosTime',this_show_name)
                    
                    confirm_yes.setAttribute('data-day_time',e.target.dataset.day_time)
                    confirm_yes.setAttribute('data-show_id',e.target.dataset.show_id)
                }
            })
            confirm_yes.addEventListener('click', async function(e){
                console.dir(e.target)
                //预约请求
                let dataBookDay = {
                    token : sessionStorage.getItem('token'),
                    day_time : e.target.dataset.day_time,
                    show_id : e.target.dataset.show_id
                }
                const resBookDay = await bookDay(dataBookDay);
                console.log(resBookDay)
                // 这个返回数据中id 在后续的请求中，二维码要根据id请求
                sessionStorage.setItem('id',resBookDay.result.id)
                sessionStorage.setItem('name',resBookDay.result.name)
                location.href = "../html/book2.html"
               
            })   
            confirm_no.addEventListener('click',function(){
                confirm.classList.add('scale0')
                confirm_filter.classList.add('index_under')       
            })


        }catch(err){
            console.log(err)
        }
    
})()